﻿@using Hotel.Application.Dics
@using Hotel.Application.Suppliers.Dto
@using Newtonsoft.Json
@model SupplierCreateUpdateDto
@{
    Layout = null;
}
@inject IDicService dicService


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 内容系统 - 文章列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="titleTpl">
        <button type="button" 	class="layui-btn layui-btn-normal layui-btn-xs">{{d.Phone}}</button>
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-table-tool-temp">
            <div class="layui-inline" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
            </div>
            <div class="layui-inline" lay-event="update">
                <i class="layui-icon layui-icon-edit"></i>
            </div>
            <div class="layui-inline" lay-event="delete">
                <i class="layui-icon layui-icon-delete"></i>
            </div>
            <div class="layui-inline" lay-event="qq">
                <i class="layui-icon layui-icon-login-weibo"></i>
            </div>
        </div>
    </script>
    <style>
        .layui-form-label {
            padding: 9px 5px;
            width: 70px;
        }

        .layui-form-item .layui-input-inline {
            width: 154px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <form>
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">供应商名称</label>
                            <div class="layui-input-inline">
                                <input type="text" asp-for="SupplierName" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">供应商编码</label>
                            <div class="layui-input-inline">
                                <input type="text" asp-for="SupplierCode" placeholder="请输入供应商编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">供应商类型</label>
                            <div class="layui-input-inline">
                                <select asp-for="SupplierType">
                                    <option value="0">--请选择--</option>
                                    @foreach (var item in await dicService.QueryByCacheAsync("SupplierType"))
                                    {
                                        <option value="@item.DicValue">@item.DicName</option>
                                    }
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-inline">
                                <input type="text" asp-for="Phone" placeholder="请输入电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-list" type="button" lay-submit lay-filter="LAY-app-contlist-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
            <div class="layui-card-body">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>
    <script src="~/moment.js/moment.min.js"></script>
    <script src="../../../layuiadmin/layui/layui.js"></script>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script>
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'contlist', 'table', 'layer'], function () {
            var table = layui.table
                , form = layui.form
                , layer = layui.layer;

           

            //供应商类型的字典数据
            var SupplierType = @Html.Raw((JsonConvert.SerializeObject(await dicService.QueryByCacheAsync("SupplierType"))));
            console.log(SupplierType);
            //第一个实例
            var tableins = table.render({
                elem: '#demo'
                , url: "@Url.Action("page")" //数据接口
                , toolbar: '#toolbarDemo'  //
                , page: true //开启分页
                , request: {
                    pageName: 'pageIndex' //页码的参数名称，默认：page
                    , limitName: 'PageSize' //每页数据量的参数名，默认：limit
                }
                , cols: [[ //表头
                    { field: 'SupplierId', title: '供应商ID', width: 60, type: "checkbox", fixed: 'left' }
                    , { field: 'SupplierCode', title: '供应商编号', width: 160 }
                    , { field: 'SupplierName', title: '供应商名称', sort: true, width: 160 }
                    , {
                        field: 'SupplierType', title: '供应商类型', width: 160, templet: function (d) {

                            return SupplierType.find(m => m.DicValue == d.SupplierType).DicName
                        }
                    }
                    , { field: 'Phone', title: '电话', templet: '#titleTpl', width: 120 }
                    , { field: 'Fax', title: '传真', sort: true, width: 160 }
                    , { field: 'Email', title: '邮箱', sort: true, width: 160 }
                    , { field: 'Contact', title: '联系人', width: 120 }
                    , { field: 'Address', title: '地址', sort: true, width: 120 }
                    , {
                        field: 'CreateTime', title: '创建时间', width: 135, sort: true, templet: function (d) {
                            return moment(d.CreateTime).format("YYYY-MM-DD")
                        }
                    }
                    , { fixed: 'right', width: 120, align: 'center', toolbar: '#barDemo' }
                ]]
            });

            form.on('submit(LAY-app-contlist-search)', function (data) {
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

                table.reload("demo",
                    {
                        where: data.field,
                        page:
                        {
                            curr: 1
                        }
                    }
                )
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            //头部工具栏触发事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
                switch (obj.event) {
                    case 'add':
                        layer.open({
                            type: 2
                            , title: '添加供应商'
                            , content: '@Url.Action("Create")'
                            , maxmin: true
                            , area: ['700px', '480px']
                            , btn: ['确定', '取消']
                            , yes: function (index, layero) {
                                //点击确认触发 iframe 内容中的按钮提交
                                var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                                submit.click();
                            }
                        });
                        break;
                    case 'delete':
                        layer.confirm('is not?', { icon: 3, title: '提示' }, function (index) {
                            //do something

                            layer.close(index);
                        });
                        break;
                    case 'update':
                        layer.msg("来个小提示", { time:10000})
                        break;
                    case 'qq':
                        layer.open({
                            content: 'test'
                            , btn: ['按钮一', '按钮二', '按钮三']
                            , anim: 3
                            , yes: function (index, layero) {
                                //按钮【按钮一】的回调
                                console.log('按钮一')
                                return false
                            }
                            , btn2: function (index, layero) {
                                //按钮【按钮二】的回调
                                console.log('按钮二')
                                return false //开启该代码可禁止点击该按钮关闭
                            }
                            , btn3: function (index, layero) {
                                //按钮【按钮三】的回调
                                console.log('按钮三')
                                return false //开启该代码可禁止点击该按钮关闭
                            }
                            , cancel: function () {
                                //右上角关闭回调
                                console.log('右上角')
                                return false //开启该代码可禁止点击该按钮关闭
                            }
                        });
                        break;
                };
            });

            //当前行工具条事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'detail') { //查看
                    //do somehing
                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        , title: 'xxx'
                    });
                } else if (layEvent === 'LAYTABLE_TIPS') {
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }
            });
        });
    </script>



</body>
</html>
